<template>
  <div
    style="
      display: flex;
      justify-content: center;
      height: 100%;
      background-color: #fff;
    "
  >
    <el-descriptions title="个人详情" :column="1" style="width: 80%">
      <el-descriptions-item label="头像：">
        <el-image
          style="
            width: 80px;
            height: 80px;
            text-align: center;
            vertical-align: middle;
            border-radius: 40px;
          "
          :src="state.userInfo.avatar"
      /></el-descriptions-item>
      <el-descriptions-item label="昵称：">{{
        state.userInfo.nickName
      }}</el-descriptions-item>
      <el-descriptions-item label="邮箱：">
        {{ state.userInfo.email }}</el-descriptions-item
      >
      <el-descriptions-item label="电话号码：">{{
        state.userInfo.telephone == null ? 123456789 : state.userInfo.phone
      }}</el-descriptions-item>
      <el-descriptions-item label="真实姓名：">{{
        state.userInfo.realName
      }}</el-descriptions-item>
      <el-descriptions-item>
        <el-button
          type="primary"
          style="align-self: center; margin-top: 20px"
          @click="handelEditDialogVisible"
          >修改个人信息</el-button
        >
      </el-descriptions-item>
    </el-descriptions>
    <el-dialog
      v-model="state.EditDialogVisible"
      title="个人信息"
      width="700"
      style="padding-left: 50px"
    >
      <el-form
        :model="state.userInfo"
        label-position="left"
        label-width="auto"
        style="max-width: 400px"
      >
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="system/file/public/upload"
            :data="{ file: state.file }"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="state.userInfo.avatar"
              :src="state.userInfo.avatar"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="state.userInfo.nickName" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="state.userInfo.email" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="state.userInfo.phone" type="number" />
        </el-form-item>
        <el-form-item label="真实名字">
          <el-input v-model="state.userInfo.realName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="state.EditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="commitForm"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { getUserInfo, editUserInfo } from "@/api/user";

import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import type { UploadProps } from "element-plus";

defineOptions({
  name: "modifyCompany"
});

let state = reactive({
  companyDetails: {},
  file: "",
  userInfo: {
    avatar: "",
    nickName: "",
    email: "",
    phone: "",
    realName: ""
  },
  EditDialogVisible: false
});
const handelEditDialogVisible = () => {
  state.EditDialogVisible = true;
};
const commitForm = async () => {
  console.log(state.userInfo);
  const result = await editUserInfo(state.userInfo);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: "更新信息成功"
    });
    initData();
    state.EditDialogVisible = false;
  } else {
    ElMessage({
      type: "warning",
      message: "更新信息失败！"
    });
  }
};
//图片上传成功
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(uploadFile);
  state.userInfo.avatar = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  console.log(rawFile);
  state.file = rawFile;
  return true;
};
const initData = async () => {
  const result1 = await getUserInfo();
  if (result1.code == 200) {
    state.userInfo = result1.data;
    console.log(state.userInfo);
  }
};
onMounted(() => {
  initData();
});
</script>
<style scoped>
.avatar-uploader .avatar {
  display: block;
  width: 100px;
  height: 100px;
}
</style>

<style>
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
